<template>
	<view class="container">
		<view class="sharePrice" v-if="showShare" @click="share">
			<text>分享</text>
		</view>
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in [pintuanInfo.img]" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="aspectFill"
							@click="previewImg([pintuanInfo.img],index)">
						</image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="introduce-section">
			<text class="i_title">{{pintuanInfo.name||''}}</text>
			<view class="price-box">
				<view class="p_left">
					<text class="price"><text class="small">¥</text>{{pintuanInfo.price||''}}</text>
				</view>
			</view>
		</view>
		<view class="c-list">
			<view class="c-row b-b flex_between">
				<!-- <view class="">
					分享可赚 ￥{{pintuanInfo.recommend_credit}}
				</view> -->
				<view class="no_refund">此产品不退货</view>
			</view>
		</view>
		<jyf-parser class="jyf-parser" :html="RulesText" :selectable="true"></jyf-parser>
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view class="btn2"
				@click.stop="$navTo(`/pages/groupbuy/createOrder?type=2&id=${goodsid}&pintuan_list_id=${pintuan_list_id}&mid=${mid}`)">
				参与拼团</view>
		</view>

		<view class="sharebg" v-if="shareimg!=''" @tap="removeimg">
			<image @longpress="toSave" :src="shareimg" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pintuan_list_id: '', //拼团卡ID
				goodsid: '', //商品ID
				mid: -1,
				pintuanInfo: {}, //拼团卡信息
				shareimg: '', //分享海报
				showShare: false, //显示分享按钮
				RulesText: '',
				code: ''
			};
		},
		async onLoad(options) {
			uni.setStorageSync('mid', '');
			if (options) {
				this.goodsid = options.goodsid
				this.pintuan_list_id = options.pintuan_list_id
			}
			if (options.scene) {
				let scene = decodeURIComponent(options.scene);
				this.goodsid = this.gup('goodsid', scene);
				this.mid = this.gup('mid', scene);
				this.pintuan_list_id = this.gup('td', scene);
			}
			if (options.mid) {
				this.mid = options.mid;
			}
			if (options.code) {
				this.code = options.code;
			}
			uni.removeStorageSync('live_id')
			if (options.live_id) {
				uni.setStorageSync('live_id', options.live_id);
			}
			uni.setStorageSync('mid', this.mid)
			this.getInfo();
			uni.showLoading({
				title: '加载中！'
			})
			if (!uni.getStorageSync('token')) {
				return this.getToken()
			}
			this.getJoinGroup()
		},
		methods: {
			getInfo() {
				this.$axios('Group/getPintuanRules', 'POST', 'pintuan').then(res => {
					if (res.data.code == 200) {
						this.RulesText = res.data.data.rules;
					}
				})
			},
			//获取拼图卡数据
			async getJoinGroup() {
				this.showShare = true
				const res = await this.$axios('Group/getJoinGroupPrice', "POST", 'pintuan', {
					pintuan_list_id: this.pintuan_list_id
				})
				uni.hideLoading()
				if (res.data.code == 200) {
					this.pintuanInfo = res.data.data.pintuan_card_info || {}
					uni.setNavigationBarTitle({
						title: this.pintuanInfo.name || '商品详情'
					})
				}
			},
			getToken() {
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: res => {
						this.$axios('login/autologin', 'POST', 'member', {
							mid: this.mid,
							code: res.code,
							aid: '9184'
						}).then(res => {
							if (res.data.code == 200) {
								uni.setStorageSync('token', res.data.data);
								this.getJoinGroup()
							} else {
								uni.hideLoading()
							}
						})
					},
					fail() {
						uni.hideLoading()
					}
				})
				// #endif
				// #ifdef H5
				this.$axios('login/autoGzlogin', 'POST', 'member', {
					mid: this.mid,
					code: this.code,
				}).then(res => {
					if (res.data.code == 300001) {
						window.location.href = res.data.data;
					} else if (res.data.code == 200) {
						uni.setStorageSync('token', res.data.data);
						this.getJoinGroup()
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				uni.setStorageSync('route',this.getFullCurrentRoute())
				this.$navHome(`/pages/public/login?mid=${this.mid||''}`)
				// #endif
			},
			// 长按保存图片
			toSave() {
				var that = this;
				uni.showModal({
					title: '图片保存',
					content: '确定要保存图片吗',
					success: e => {
						if (e['confirm']) {
							uni.downloadFile({
								url: that.shareimg,
								success: function(url) {
									uni.saveImageToPhotosAlbum({
										filePath: url.tempFilePath,
										success: function(e) {
											uni.showToast({
												title: '图片保存成功',
												icon: 'none',
												duration: 2200
											});
										},
									});
								},
								fail(e) {
									console.log(e)
								}
							});
						}
					}
				});
			},
			// 预览图片
			previewImg(logourl, number) {
				let _this = this;
				uni.previewImage({
					current: number,
					urls: logourl,
				});
			},
			share: function() {
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				this.$axios('Detail/create_goods_poster', "POST", 'pt', {
					goodsid: this.goodsid,
					pintuan_list_id: this.pintuan_list_id,
					url: `/pages/groupbuy/product?pintuan_list_id=${ this.pintuan_list_id}&goodsid=${ this.goodsid}`
				}).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						this.shareimg = res.data.data.url
					}
				})
			},
			removeimg: function() {
				this.shareimg = ''
			}
		},
	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}

	.nobind {
		position: relative;

		.e_close {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
	}

	.container {
		padding-bottom: 60rpx;
	}

	.group_details {
		background-color: #fff;
		padding: 20rpx;
		margin-top: 15rpx;

		.g_list {
			margin-top: 10rpx;

			.gl_box {
				color: #9A1FE8;
				font-size: 28rpx;
				margin: 20rpx 0;
				display: flex;
				justify-content: space-between;

				.slb_left {
					width: 80%;
				}

				.gl_join {
					font-weight: 900;
				}
			}
		}

		.gd_tit {
			display: flex;
			justify-content: space-between;

			.gd_left {
				image {
					width: 4rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: bold;
					color: #13001E;
				}
			}

			.gd_right {
				display: flex;
				align-items: center;

				image {
					width: 26rpx;
					height: 26rpx;
					margin-left: 10rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: normal;
					color: #999999;
				}
			}
		}
	}

	/* 限时购 */
	.limit {
		position: relative;
		margin-top: -24rpx;
	}

	.limit image {
		width: 100%;
	}

	.limit-money {
		position: absolute;
		left: 40rpx;
		top: 50%;
		transform: translateY(-40%);
		color: rgb(255, 255, 255);
		font-size: 30rpx;
	}

	.limit-time {
		position: absolute;
		right: 16rpx;
		top: 50%;
		transform: translateY(22%);
		color: rgb(109, 33, 255);
		font-size: 28rpx;
	}

	.limit-time text {
		color: #fff;
		display: inline-block;
		border-radius: 10rpx;
		text-align: center;
		/* width: 38rpx; */
		line-height: 38rpx;
		padding: 0 2px;
		background-color: rgb(109, 33, 255);
	}

	.sharePrice {
		font-size: 20rpx;
		position: fixed;
		right: 0;
		top: 300px;
		background-color: #8405dc;
		border-radius: 16rpx 0 0 16rpx;
		color: #fff;
		text-align: center;
		z-index: 50;
		/* padding: 14rpx; */
		padding: 14rpx 8rpx 14rpx 18rpx;
		background: linear-gradient(90deg, #A350E8 0%, #4E07A9 100%);
		font-size: 32rpx;
		letter-spacing: 8rpx;
		font-weight: bold;
	}

	/* 久久店铺 */
	.details-store {
		background-color: #fff;
		margin-top: 16rpx;
		padding: 20rpx;
	}

	.details-store-title,
	.details-store-cont {
		display: flex;
		align-items: center;
		justify-content: start;
	}

	.details-store-title image {
		width: 20%;
		margin-right: 20rpx;
	}

	.details-store-title view {
		overflow: hidden;
		font-size: 36rpx;
		line-height: 50rpx;
		color: $font-color-dark;
	}

	.details-store-title view:nth-child(2) {
		color: $font-color-base;
		font-size: 32rpx;
	}

	.details-store-cont {
		justify-content: center;
		color: $font-color-light;
		font-size: 32rpx;
	}

	.details-store-cont view {
		margin: 0 2%;
		border: 1px $border-color-dark solid;
		margin-top: 20rpx;
		width: 48%;
		line-height: 66rpx;
		text-align: center;
	}

	.platop-css {
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		bottom: 200rpx;
		right: 40rpx;
		z-index: 799;
		border-radius: 50%;
		font-size: 22rpx;
		text-align: center;
		line-height: 6rpx;
		background-color: rgba(255, 255, 255, 0.7);
		color: #8a8a8a;
		/* border: 1px #8a8a8a solid; */
		font-weight: 900;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.icon-you {
		font-size: 30rpx;
		color: #888;
	}

	.carousel {
		height: 722rpx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 722rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	/* 标题简介 */
	.introduce-section {
		background: #fff;
		padding: 20rpx 20rpx 0;

		.i_title {
			font-size: 30rpx;
			color: #13001E;
			line-height: 50rpx;
		}

		.price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.in_sj {
				background: #000;
				color: gold;
				border-radius: 8rpx;
				line-height: 36rpx;
				padding: 0 10rpx;
				font-size: 22rpx;
			}

			.price {
				font-size: 44rpx;
				font-weight: bold;
				color: #9A1FE8;

				.small {
					font-size: 20rpx;
				}
			}

			.p_right {
				font-size: 28rpx;
				color: #9A1FE8;
			}

			.m-price {
				margin: 0 12rpx;
				color: $font-color-light;
				text-decoration: line-through;
			}
		}

	}

	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16rpx;

		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			font-size: 30rpx;
			color: $font-color-dark;
			position: relative;

			text {
				padding: 0 20rpx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300rpx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}



	.sharebg {
		position: fixed;
		z-index: 998;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);

		image {
			width: 80%;
			position: fixed;
			left: 50%;
			top: 50%;
			z-index: 999;
			transform: translate(-50%, -50%);
		}
	}

	.group_now {
		display: flex;
		align-items: center;
		margin: 10rpx 0;

		image {
			width: 120rpx;
			height: 36rpx;
			z-index: 99;
		}

		text {
			background-color: #f5e9fd;
			font-size: 20rpx;
			height: 36rpx;
			line-height: 36rpx;
			padding: 0 20rpx;
			border-radius: 8rpx;
			margin-left: -20rpx;
			color: #9A1FE8;
		}
	}

	.butie {
		margin-top: 20rpx;
		color: $bg-color;
		font-weight: bold;
		font-size: 24rpx;
	}

	.c-list {
		font-size: $font-lg;
		color: $font-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx;
			position: relative;
		}

		.tit {
			/* width: 140rpx; */
			padding-right: 20rpx;
		}

		.no_refund {
			background: #FFF0DA;
			color: #E19C37;
			line-height: 40rpx;
			padding: 2rpx 10rpx;
			border: 2rpx solid #E19C37;
			font-size: 24rpx;
			border-radius: 6rpx;
		}

		.con {
			flex: 1;
			color: $font-color-dark;

			.selected-text {
				margin-right: 10rpx;
			}
		}

		.bz-list {
			height: 40rpx;
			font-size: 26rpx;
			color: $font-color-dark;

			text {
				display: inline-block;
				margin-right: 30rpx;
			}
		}

		.red {
			color: $uni-color-primary;
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		bottom: 0;
		z-index: 95;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 690rpx;
		/* height: 100rpx; */
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, .5);
		width: 100%;
		padding: 20rpx 20rpx 50rpx;

		.btn1,
		.btn2 {
			flex: 1;
			text-align: center;
			line-height: 84rpx;
			font-size: 28rpx;
			font-weight: bold;
			border-radius: 24rpx;
		}

		.btn1 {
			background: #eddcfb;
			color: #9A1FE8;
		}

		.btn2 {
			background: linear-gradient(98deg, #FF38E5 0%, #8813E2 61%);
			color: #fff;
		}
	}

	.jyf-parser {
		padding-bottom: 110rpx;
	}
</style>